<!DOCTYPE html>
<html lang="en" class="app">
<head>
    <meta charset="utf-8" />
    <title>无线公共支持综合网管理平台</title>
    <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="css/animate.css" type="text/css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="css/icon.css" type="text/css" />
    <link rel="stylesheet" href="css/font.css" type="text/css" />
    <link rel="stylesheet" href="css/app.css" type="text/css" />
    <link rel="stylesheet" href="ui/zTree/css/zTreeStyle/zTreeStyle.css" />
    <link rel="stylesheet" href="css/bianfeng.css" type="text/css" />
    <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
    <![endif]-->
</head>
<body class="">
<section class="vbox">
    <!--# include file="header.html" -->
    <section>
        <section class="hbox stretch">
            <aside class="bg-black aside-md hidden-print hidden-xs" id="nav">
                <!--# include file="left.html" -->
            </aside>
            <section id="content">
                <section class="hbox stretch">
                    <section class="vbox">
                        <section class="scrollable padder">
                            <div class="m-b-md">
                                <h3 class="m-b-none">栏目管理</h3>
                            </div>
                            <section class="panel panel-default">
                                <div class="panel-body">
                                    <form class="form-horizontal" method="get">
                                        <ul id="treeDemo" class="ztree"></ul>
                                        <div class="line line-dashed b-b line-lg pull-in"></div>
                                        <div class="form-group">
                                            <div class="col-sm-4 col-sm-offset-2">
                                                <button type="button" class="btn btn-default">取消</button>
                                                <button type="submit" class="btn btn-primary">修改</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </section>
                        </section>
                    </section>
                </section>
                <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
            </section>
        </section>
    </section>
</section>
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- App -->
<script src="js/bianfeng.js"></script>
<script src="js/app.js"></script>

<script src="js/chosen/chosen.jquery.min.js"></script>
<script src="ui/zTree/js/jquery.ztree.core-3.5.js"></script>
<script src="ui/zTree/js/jquery.ztree.excheck-3.5.js"></script>
<script src="ui/zTree/js/jquery.ztree.exedit-3.5.js"></script>
<script>
    var setting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        edit: {
            enable: true,
            editNameSelectAll: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeDrag: beforeDrag,
            beforeEditName: beforeEditName,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove,
            onRename: onRename
        }
    };

    var zNodes = [
        {id: 1, pId: 0, name: "首页", open: true},
        {id: 2, pId: 1, name: "产品库", open: true},
        {id: 20, pId: 2, name: "角色扮演"},
        {id: 21, pId: 2, name: "枪战射击"},
        {id: 22, pId: 2, name: "动作冒险"},
        {id: 23, pId: 2, name: "赛车竞速"},
        {id: 24, pId: 2, name: "策略战棋"},
        {id: 25, pId: 2, name: "即时战略"},
        {id: 26, pId: 2, name: "体育竞技"},
        {id: 27, pId: 2, name: "模拟经营"},
        {id: 28, pId: 2, name: "恋爱养成"},
        {id: 3, pId: 1, name: "评级评测", open: true},
        {id: 30, pId: 3, name: "评级产品"},
        {id: 31, pId: 3, name: "评测产品"},
        {id: 4, pId: 1, name: "外包资源", open: true},
        {id: 40, pId: 4, name: "外包公司"},
        {id: 41, pId: 4, name: "美术资源"},
        {id: 5, pId: 1, name: "新闻故事", open: true},
        {id: 50, pId: 5, name: "部门事件"},
        {id: 51, pId: 5, name: "业务新闻"},
        {id: 52, pId: 5, name: "故事八卦"},
        {id: 6, pId: 1, name: "业务需求", open: true}
    ];
    var log, className = "dark";
    function beforeDrag(treeId, treeNodes) {
        return false;
    }
    function beforeEditName(treeId, treeNode) {
        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        return confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？");
    }
    function beforeRemove(treeId, treeNode) {
        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
    }
    function onRemove(e, treeId, treeNode) {
        showLog("[ " + getTime() + " onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
    }
    function beforeRename(treeId, treeNode, newName, isCancel) {
        className = (className === "dark" ? "" : "dark");
        showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>" : ""));
        if (newName.length == 0) {
            alert("节点名称不能为空.");
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            setTimeout(function () {
                zTree.editName(treeNode)
            }, 10);
            return false;
        }
        return true;
    }
    function onRename(e, treeId, treeNode, isCancel) {
        showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>" : ""));
    }
    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='" + className + "'>" + str + "</li>");
        if (log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }
    function getTime() {
        var now = new Date(),
                h = now.getHours(),
                m = now.getMinutes(),
                s = now.getSeconds(),
                ms = now.getMilliseconds();
        return (h + ":" + m + ":" + s + " " + ms);
    }

    var newCount = 1;
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_" + treeNode.tId);
        if (btn) btn.bind("click", function () {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.addNodes(treeNode, {id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++)});
            return false;
        });
    }

    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    }

    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
</script>
<script src="ui/kindeditor/kindeditor-min.js"></script>
<script src="ui/kindeditor/lang/zh_CN.js"></script>
<script>
    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            allowFileManager: true
        });
    });
</script>
</body>
</html>